<template>
	<view>
		<form>
			<view class="loginpass_wrapper">
				<view class="wrapper_item">
					<text>手机号</text>
					<input v-model="loginPass.phone" placeholder="请输入手机号码" type="text" />
				</view>
				<view class="wrapper_item">
					<text>验证码</text>
					<input v-model="loginPass.invitationCode" type="text" placeholder="请输入验证码" />
					<view @click="clickCode" class="code">{{verificationCodeText}}</view>
				</view>
				<view class="wrapper_item">
					<text>新密码</text>
					<input v-model="loginPass.password" type="text" placeholder="请输入密码" />
				</view>

			</view>
			<button @click="clickloginPass" class="loginpass_btn">确认修改</button>
		</form>
	</view>
</template>

<script>
	import {
		getMessageCode,
		register,
		changePwd
	} from '@/request/api/login.js'

	export default {
		name: 'loginPass',
		data() {
			return {
				duration: 60,
				enabled: true,
				timer: undefined,
				verificationCodeText:'获取验证码',
				loginPass: {
					phone: '',
					password: '',
					invitationCode: ''
				},
			}
		},
		methods: {
			Timeloop() {
				this.verificationCodeText = this.duration + 's'
				this.duration = this.duration - 1
				if (this.duration == 0) {
					this.duration = 60
					this.verificationCodeText = '获取验证码'
					clearInterval(this.timer)
					this.enabled = true
				}
			},
			startTimer() {
				this.enabled = false
				if (this.timer) {
					clearInterval(this.timer)
				}
				this.timer = setInterval(this.Timeloop, 1000, 60)
			},
			clickCode() {
				if (!this.loginPass.phone || this.loginPass.phone.length == 0) {
					uni.showToast({
						title: '请输入手机号码',
						icon:'error'
					})
					return
				}
				if (!this.enabled) {
					return
				}
				const phone =  this.loginPass.phone
				getMessageCode({phone }).then((res)=>{
					if(res.code==0){
						uni.showToast({
							title:'验证码发送成功'
						})
						this.enabled = false
						this.startTimer()
					}
				})
			},
			async clickloginPass() {
				if (!this.loginPass.phone || this.loginPass.phone.length == 0) {
					uni.showToast({
						title: '请输入手机号码',
						icon:'error'
					})
					return
				}
				if (!this.loginPass.invitationCode || this.loginPass.invitationCode.length == 0) {
					uni.showToast({
						title: '请输入验证码',
						icon:'error'
					})
					return
				}
				if (!this.loginPass.password || this.loginPass.password.length == 0) {
					uni.showToast({
						title: '请输入密码',
						icon:'error'
					})
					return
				}
				changePwd(this.loginPass).then(res=>{
					if(res.code==0){
						uni.showToast({
							title:'修改成功'
						})
						uni.navigateBack()
					}
				})
			}
		}
	}
</script>

<style scoped>
	.loginpass_wrapper {
		background-color: #fff;
		padding: 0 15px;
		display: flex;
		flex-direction: column;
	}

	.loginpass_wrapper .wrapper_item {
		height: 42px;
		align-items: center;
		position: relative;
		border-bottom: .5px solid #eee;
		display: flex;
		flex-direction: row;
	}

	.loginpass_wrapper .wrapper_item text {
		width: 25%;
		font-size: 15px;
		font-weight: 400;
		color: #999;
		line-height: 23px;
	}

	.loginpass_wrapper .code {
		width: 95px;
		height: 24px;
		background: #fc4141;
		border-radius: 12px;
		position: absolute;
		right: 0;
		font-size: 13px;
		font-weight: 400;
		color: #fff;
		line-height: 20px;
		padding: 0px 7px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.loginpass_btn {
		margin: 15px 10px;
		height: 46px;
		font-size: 18px;
		font-weight: 400;
		color: #fff;
		line-height: 27px;
		background-image: linear-gradient(90deg, #2c7fd9, #4fa1f3);
		border-radius: 8px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>